<template>
    <mt-loadmore v-if="type==='top'"  :top-method="loadTopMore"   ref="loadmore"
                 :auto-fill="false"
                  @top-status-change="(status)=>{ topStatus = status;}">
        <div slot="top" class="mint-loadmore-top" style="text-align: center;">
            <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }"><i class="el-icon-top"></i></span>
            <span v-show="topStatus === 'loading'">
                <mt-spinner type="snake"></mt-spinner>
            </span>
        </div>
        <slot></slot>
    </mt-loadmore>

    <mt-loadmore v-else   :bottom-method="loadMore" :bottom-all-loaded="allLoaded" ref="loadmore"
                  :auto-fill="false"
                  @bottom-status-change="(status)=>{ bottomStatus = status;}" >
        <slot></slot>
        <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }"><i class="el-icon-bottom"></i></span>
            <span v-show="bottomStatus === 'loading'">
                <mt-spinner type="snake"></mt-spinner>
            </span>
        </div>
    </mt-loadmore>
</template>

<script>
export default {
  name: 'pull-more',
  data() {
    return {
      type: this.method,
      allLoaded: false,
      topStatus: false,
      bottomStatus: false,
    }
  },
  props: {
    method: {
      type: String,
      default: 'bottom'
    },
  },
  methods: {
    loadMore() {
      this.$emit('pull', val => {
        console.log('是否加载完毕', val);
        if (val===true) { // 若数据已全部获取完毕
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      });
    },
    loadTopMore() {
      this.$emit('pull', val => {
        this.$refs.loadmore.onTopLoaded();
      });
    }
  }
}
</script>

<style scoped>

</style>
